$(function () {
    $layout = $('.metro-layout');
    $container = $('.metro-layout .content');
    function changeLayoutMode(isHorizontal) {
        $('.items', $layout).removeAttr('style');
        if (isHorizontal) {
            $('.items', $layout).css({ width: $('.items', $layout).outerWidth() }).isotope({ itemSelector: '.box', layoutMode: 'masonryHorizontal', animationEngine: 'css' });
        }
        else {
            $('.items', $layout).css({ width: 'auto' }).isotope({ itemSelector: '.box', layoutMode: 'masonry', animationEngine: 'css' });
        }
    }

    changeLayoutMode($layout.hasClass('horizontal'));
    $('.next', $layout).click(function (ev) {
        ev.preventDefault();
        $container.stop().animate({ scrollLeft: '+=' + ($('body').innerWidth() / 1.8) }, 400);
    });
    $('.prev', $layout).click(function (ev) { ev.preventDefault(); $container.stop().animate({ scrollLeft: '-=' + ($('body').innerWidth() / 1.8) }, 400); });
    $('.up', $layout).click(function (ev) {
        ev.preventDefault(); $container.stop().animate({ scrollTop: '-=' + ($('body').innerHeight() / 1.8) }, 400);
    });

    $('.down', $layout).click(function (ev) {
        ev.preventDefault(); $container.stop().animate({ scrollTop: '+=' + ($('body').innerHeight() / 1.8) }, 400);
    });

    $('.toggle-view', $layout).click(function (ev) {
        ev.preventDefault(); $layout.toggleClass('horizontal vertical');
        changeLayoutMode($layout.hasClass('horizontal'));
        toggleSlideControls();
    });

    function toggleSlideControls() {
        var hasHScrollbar = $container.get(0).scrollWidth > $container.innerWidth();

        var hasVScrollbar = $container.get(0).scrollHeight > $container.innerHeight(); if (hasHScrollbar) $('.prev,.next', $layout).show();

        else $('.prev,.next', $layout).hide(); if (hasVScrollbar) $('.up,.down', $layout).show();

        else $('.up,.down', $layout).hide();

    };

    toggleSlideControls(); $('.items', $layout).bind('mousewheel', function (ev, delta, deltaX, deltaY) {
        if (delta) {
            ev.preventDefault();

            var isHorizontal = $layout.hasClass('horizontal'); if (isHorizontal) $container.stop().animate({ scrollLeft: '-=' + ($('body').innerWidth() / 4 * delta) }, 10);

            else $container.stop().animate({ scrollTop: '-=' + ($('body').innerHeight() / 4 * delta) }, 10); console.log(delta, deltaX, deltaY);
        } 
    });

    var resizeTimer;

    $(window).bind('resize', function () {
        clearTimeout(resizeTimer);

        resizeTimer = setTimeout(toggleSlideControls, 100);
    });

    $container.dragscrollable({ dragSelector: '.items' });

})